<div class="col-xl-12">
    <div class="widget has-shadow">
        <div class="widget-body">
            <form class="needs-validation pt-5" novalidate>
                <div class="form-group row d-flex align-items-center mb-5">
                    <label class="col-lg-4 form-control-label d-flex justify-content-lg-end necessary"><span class="translate" translateFor="label.mqConfigId"></span></label>
                    <div class="col-lg-5">
                        <input type="text" name="mqConfigId" class="form-control translate" translateFor="placeholder.enterMqConfigId" translateTo="placeholder" required>
                        <div class="invalid-feedback">
                            <span class="translate" translateFor="message.invalidEnterMqConfigId"></span>
                        </div>
                    </div>
                </div>
                <div class="form-group row d-flex align-items-center mb-5 mq-type">
                    <label class="col-lg-4 form-control-label d-flex justify-content-lg-end necessary"><span class="translate" translateFor="label.mqType"></span></label>
                    <div class="col-lg-1-0">
                        <div class="custom-control custom-radio styled-radio">
                            <input class="custom-control-input" type="radio" name="mqType" id="mqType-R" value="R" checked required>
                            <label class="custom-control-descfeedback" for="mqType-R"><span class="translate" translateFor="mqType.R"></span></label>
                        </div>
                    </div>
                    <div class="col-lg-1-0">
                        <div class="custom-control custom-radio styled-radio">
                            <input class="custom-control-input" type="radio" name="mqType" id="mqType-A" value="A" required>
                            <label class="custom-control-descfeedback" for="mqType-A"><span class="translate" translateFor="mqType.A"></span></label>
                        </div>
                    </div>
                </div>
                <div class="form-group row d-flex align-items-center mb-5 mq-type-rocketmq">
                    <label class="col-lg-4 form-control-label d-flex justify-content-lg-end necessary"><span class="translate" translateFor="label.mqNameServer"></span></label>
                    <div class="col-lg-5">
                        <input type="text" name="mqNameServer" class="form-control translate" translateFor="placeholder.mqNameServer" translateTo="placeholder" required>
                        <div class="invalid-feedback">
                            <span class="translate" translateFor="message.invalidMqNameServer"></span>
                        </div>
                    </div>
                </div>
                <div class="form-group row d-flex align-items-center mb-5 mq-type-rocketmq">
                    <label class="col-lg-4 form-control-label d-flex justify-content-lg-end necessary"><span class="translate" translateFor="label.mqProducerGroupName"></span></label>
                    <div class="col-lg-5">
                        <input type="text" name="mqProducerGroupName" class="form-control translate" translateFor="placeholder.mqProducerGroupName" translateTo="placeholder" required>
                        <div class="invalid-feedback">
                            <span class="translate" translateFor="message.invalidMqProducerGroupName"></span>
                        </div>
                    </div>
                </div>
                <div class="form-group row d-flex align-items-center mb-5 mq-type-rocketmq">
                    <label class="col-lg-4 form-control-label d-flex justify-content-lg-end necessary"><span class="translate" translateFor="label.mqConsumerGroupName"></span></label>
                    <div class="col-lg-5">
                        <input type="text" name="mqConsumerGroupName" class="form-control translate" translateFor="placeholder.mqConsumerGroupName" translateTo="placeholder" required>
                        <div class="invalid-feedback">
                            <span class="translate" translateFor="message.invalidMqConsumerGroupName"></span>
                        </div>
                    </div>
                </div>
                <div class="form-group row d-flex align-items-center mb-5 mq-type-activemq">
                    <label class="col-lg-4 form-control-label d-flex justify-content-lg-end necessary"><span class="translate" translateFor="label.mqBrokerUrl"></span></label>
                    <div class="col-lg-5">
                        <input type="text" name="mqBrokerUrl" class="form-control translate" translateFor="placeholder.mqBrokerUrl" translateTo="placeholder" required>
                        <div class="invalid-feedback">
                            <span class="translate" translateFor="message.invalidMqBrokerUrl"></span>
                        </div>
                    </div>
                </div>
                <div class="form-group row d-flex align-items-center mb-5 mq-type-activemq">
                    <label class="col-lg-4 form-control-label d-flex justify-content-lg-end necessary"><span class="translate" translateFor="label.mqUser"></span></label>
                    <div class="col-lg-5">
                        <input type="text" name="mqUser" class="form-control translate" translateFor="placeholder.mqUser" translateTo="placeholder" required>
                        <div class="invalid-feedback">
                            <span class="translate" translateFor="message.invalidMqUser"></span>
                        </div>
                    </div>
                </div>
                <div class="form-group row d-flex align-items-center mb-5 mq-type-activemq">
                    <label class="col-lg-4 form-control-label d-flex justify-content-lg-end necessary"><span class="translate" translateFor="label.mqPassword"></span></label>
                    <div class="col-lg-5">
                        <input type="text" name="mqPassword" class="form-control translate" translateFor="placeholder.mqPassword" translateTo="placeholder" required>
                        <div class="invalid-feedback">
                            <span class="translate" translateFor="message.invalidMqPassword"></span>
                        </div>
                    </div>
                </div>
                <div class="text-right mb-5 mr-5">
                    <button class="btn btn-gradient-01 mr-4 min-width-150" type="button" id="submitForm"><span class="translate lang" translateFor="btn.submitForm"></span></button>
                    <button class="btn btn-shadow min-width-150" type="button" id="resetForm"><span class="translate lang" translateFor="btn.resetForm"></span></button>
                </div>
            </form>
        </div>
    </div>
</div>